﻿<!DOCTYPE html>
<html lang="en" class="ace ace-card-on ace-tab-nav-on ace-main-nav-on ace-sidebar-on" data-theme-color="#c0e3e7">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Favor</title>
    <meta name="description" content="">

{#    <link rel="apple-touch-icon" href="apple-touch-icon.png">#}
{#    <link rel="shortcut icon" href="favicon.ico">#}

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

    <!-- Icon Fonts -->
    <link href="../../static/main_style/fonts/icomoon/style.css" rel="stylesheet">

    <!-- Styles -->
    <link href="../../static/main_style/js/plugins/highlight/solarized-light.css" rel="stylesheet">
    <link href="../../static/main_style/style.css" rel="stylesheet">

    <!-- Modernizer -->
    <script type="text/javascript" src="../../static/main_style/js/vendor/modernizr-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        function clickFavor(id) {
            var img = document.getElementById(id);
            var isFavor = img.getAttribute("alt");
            if (isFavor === "favor") {
                img.setAttribute("alt", "notFavor");
                img.setAttribute("src", "../../static/main_style/img/favor-1.png");
                var data = {};
                data["id"] = id;
                data["op"] = 0;

                $.ajax({
                        type: 'POST',
                        url: '/scholar/operateFavor',
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        success: window.onload=function(callback) {
                            {#window.alert(callback.res + callback.id + callback.op);#}
                            {#console.log(callback);#}
                            {#window.alert(callback.first_name + " " + callback.last_name);#}
                            // Watch out for Cross Site Scripting security issues when setting dynamic content!
                            {#var elem = document.getElementById('hello');#}
                            {#console.log(elem);#}
                            {#elem.innerText = callback.first_name + ' ' + callback.last_name  + '!';#}
                            {#elem.style.color = "red";#}
                            {#$(this).text('Hello ' + callback.first_name + ' ' + callback.last_name  + '!');#}
                        },
                        error: function() {
                            window.alert("Something get error!")
                        }
                    });
            }
            else {
                img.setAttribute("alt", "favor");
                img.setAttribute("src", "../../static/main_style/img/favor-2.png");
                var data = {};
                data["id"] = id;
                data["op"] = 1;

                $.ajax({
                        type: 'POST',
                        url: '/scholar/operateFavor',
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        success: window.onload=function(callback) {
                            {#window.alert(callback.res + callback.id + callback.op);#}
                            {#console.log(callback);#}
                            {#window.alert(callback.first_name + " " + callback.last_name);#}
                            // Watch out for Cross Site Scripting security issues when setting dynamic content!
                            {#var elem = document.getElementById('hello');#}
                            {#console.log(elem);#}
                            {#elem.innerText = callback.first_name + ' ' + callback.last_name  + '!';#}
                            {#elem.style.color = "red";#}
                            {#$(this).text('Hello ' + callback.first_name + ' ' + callback.last_name  + '!');#}
                        },
                        error: function() {
                            window.alert("Something get error!")
                        }
                    });
            }

        }


        function clickSearchButton(id) {
            var searchForm = document.getElementById(id);
            var kw = searchForm.children[0].children[1].value;
            {#window.alert(kw);#}
            if (kw === "") {
                window.alert("Nothing to Search")
            }
            else {
                var data = {};
                data["kw"] = kw;
                $.ajax({
                        type: 'POST',
                        url: '/scholar/easySearch',
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        success: window.onload=function(callback) {
                             if (callback.redirect) {
                                window.location.href = callback.redirect;
                             }
                             else {
                                 window.alert("Something get error!");
                             }
                        },
                        error: function() {
                            window.alert("Something get error!")
                        }
                    });
            }
        }

        function changeRecomm() {
            var recomm = document.getElementsByClassName("widget widget_posts_entries")[0];
            {#window.alert(recomm);#}
            var ul_list = recomm.children[1];
            t_name_list = [];
            for (i = 0; i < ul_list.children.length; ++i) {
                var li_name = ul_list.children[i].children[1].children[0].children[0].innerHTML;
                t_name_list.push(li_name)
            }
            var res;
            $.ajax({
                        type: 'POST',
                        url: '/scholar/recomm',
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        async:false,
                        data: JSON.stringify(t_name_list),
                        success: window.onload=function(callback) {
                             res = callback.recomm_list;
                        },
                        error: function() {
                            window.alert("Something get error!");
                        }
                    });
            if (!res) {
                window.alert("Something get error!");
            }
            var i = 0;
            for (i = 0; i < res.length; ++i) {
                var li = ul_list.children[i];
                var a1 = li.children[0];
                var div1 = li.children[1];
                var div2 = li.children[2];
                var img = a1.children[0];
                var a2 = div1.children[0].children[0];
                var a3 = div2.children[0];
                var a4 = div2.children[1];
                img.setAttribute("src", res[i][1]);
                a1.setAttribute("href", "professor/" + res[i][0]);
                a2.setAttribute("href", "professor/" + res[i][0]);
                a2.innerHTML = res[i][0];
                a3.innerHTML = (res[i][2]) ? res[i][2] : "None";
                a4.innerHTML = (res[i][3]) ? res[i][3] : "None";
            }
            {#window.alert(i + " " + ul_list.children.length);#}
            for (; i < ul_list.children.length; ++i) {
                {#window.alert(i + " " + ul_list[i]);#}
                ul_list.children[i].remove();
            }
        }

    </script>
  </head>
  <body>
     <div class="ace-wrapper">
         <header id="ace-header" class="ace-container-shift ace-logo-in ace-head-boxed ace-nav-right">
             <div class="ace-head-inner">
                 <div class="ace-head-container ace-container">
                     <div class="ace-head-row">
                         <div id="ace-head-col1" class="ace-head-col text-left">
                             <a id="ace-logo" class="ace-logo" href="{{ "index" }}">
                                <img src="../../static/main_style/img/uploads/brand/logo.svg" alt="ace resume"><span>YanHu</span>
                             </a>
                         </div>
                         
                         <div id="ace-head-col2" class="ace-head-col text-right">
                             <div class="ace-nav-container ace-container hidden-sm hidden-xs">
                                 <nav id="ace-main-nav">
                                    <ul class="clear-list">
										<li><a href= {{ "index" }}>hot</a></li>
{#										<li><a href="portfolio.html">portfolio</a>#}
{#										<li><a href="testimonials.html">references</a></li>#}
										<li><a href={{ "search" }}>search</a></li>
										<li><a href={{ "favor" }}>favor</a></li>
										<li><a href={{ "logout" }}>logout</a></li>
									</ul>
                                 </nav>
                             </div>
                         </div>
                         
                         <div id="ace-head-col3" class="ace-head-col text-right">
                             <button id="ace-sidebar-btn" class="btn btn-icon btn-light btn-shade">
                                 <span class="ace-icon ace-icon-side-bar-icon"></span>
                             </button>
                         </div>
                     </div>
                 </div><!-- .ace-container -->
             </div><!-- .ace-head-inner -->
        </header><!-- #ace-header -->


        <div id="ace-content" class="ace-container-shift">
            <div class="ace-container">


                    <div id="ace-nav-wrap" class="hidden-sm hidden-xs">
                        <div class="ace-nav-cont">
                            <div id="ace-nav-scroll">
                                <nav id="ace-nav" class="ace-nav">
                                    <ul class="clear-list">
										<li>
											<a href="#" data-tooltip="Home"><img class="avatar avatar-42" src="../../static/my_style/imgs/ha_glass.jpg" alt=""></a>
										</li>
										<li>
											<a href="#" data-tooltip="Experience"><span class="ace-icon ace-icon-experience"></span></a>
										</li>
										<li>
											<a href="#" data-tooltip="Portfolio"><span class="ace-icon ace-icon-portfolio"></span></a>
										</li>
										<li>
											<a href="#" data-tooltip="References"><span class="ace-icon ace-icon-references"></span></a>
										</li>
										<li>
											<a href="#" data-tooltip="Contact"><span class="ace-icon ace-icon-contact"></span></a>
										</li>
										<li>
											<a href="#" data-tooltip="Blog"><span class="ace-icon ace-icon-blog"></span></a>
										</li>
									</ul>
                                </nav>
                            </div>

                            <div id="ace-nav-tools" class="hidden">
                                <span class="ace-icon ace-icon-dots-three-horizontal"></span>

                                <button id="ace-nav-arrow" class="clear-btn">
                                    <span class="ace-icon ace-icon-chevron-thin-down"></span>
                                </button>
                            </div>
                        </div>
                        <div class="ace-nav-btm"></div>
                    </div><!-- .ace-nav-wrap -->

                <div class="ace-paper-stock">
                    <main class="ace-paper clearfix">
                        <div class="ace-paper-cont clear-mrg">

						<!-- START: PAGE CONTENT -->

                            <div class="padd-box">
                                <h1 class="title-lg text-upper">My Stars</h1>
                            </div>
                            <div class="brd-btm">
                            </div>

                            <br>

                            <div class="pf-wrap">
                                <div class="pf-filter padd-box">
                                    <button data-filter="*">favorite professors</button>
                                </div><!-- .pf-filter -->

                                <div class="pf-grid">
                                    <div class="pf-grid-sizer"></div><!-- used for sizing -->
                                    {% for favor_item in professor_info %}
                                        <div class="pf-grid-item photography">
                                        <div class="project">
                                            <figure class="portfolio-figure">
                                                <img src={{ favor_item[3]}} alt="" style="height: 293px; width: 300px; margin: 0 auto">
                                            </figure>

                                            <div class="portfolio-caption text-center">
                                                <div class="valign-table">
                                                    <div class="valign-cell">
                                                        {% set professor_url = "professor/" + favor_item[1] | replace (" ", "%20")  %}
                                                        <h2 class="text-upper">{{ favor_item[1] }}</h2>
                                                        <p>
                                                            {{ favor_item[4] }}
                                                            <br>
                                                            {{ favor_item[5] }}
                                                        </p>
                                                        <div style="text-align: center">
                                                            <div style="width: 100px; height:auto; float:left; display: inline; margin-left: 40px" >
                                                                <a href={{ professor_url }} ; class="pf-btn-view btn btn-primary">View More</a>
                                                            </div>
                                                            <div style="width: 100px; height:auto; float:right; display: inline; margin-right: 40px" >
                                                                 <img id={{ favor_item[1] | replace (" ", "%20") }} src="../../static/main_style/img/favor-2.png" style="padding-left: 10px; width:40%; height:40%; padding-bottom: 10px" alt="favor" onclick="clickFavor(this.id)"/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

{#                                        <div id="pf-popup-1" class="pf-popup clearfix">#}
{#                                            <div class="pf-popup-col1">#}
{#                                                <div class="pf-popup-media">#}
{##}
{#                                                </div>#}
{#                                            </div><!-- .pf-popup-col1 -->#}
{##}
{#                                            <div class="pf-popup-col2">#}
{#                                                <div class="pf-popup-info clear-mrg">#}
{#                                                    <h2 class="text-upper">Project Title</h2>#}
{#                                                    <p class="text-muted"><strong>design / development</strong></p>#}
{#                                                    <dl class="dl-horizontal">#}
{#                                                        <dt>Date:</dt>#}
{#                                                        <dd>11 Jan 2012</dd>#}
{##}
{#                                                        <dt>Site link:</dt>#}
{#                                                        <dd><a href="www.sitedomen.com">www.sitedomen.com</a></dd>#}
{##}
{#                                                        <dt>Client:</dt>#}
{#                                                        <dd>11 Jan 2012</dd>#}
{#                                                    </dl>#}
{#                                                    <p>About 64% of all on-line teens say that do things online that they wouldn’t want their#}
{#                                                        parents to know about. 11% of all adult internet users visit dating websites and spend their#}
{#                                                        time in chatrooms. Some of the classify their behavior as “cyber affair” More then 60% of#}
{#                                                        employees use company PC for the personal needs during their work hours as long as 80#}
{#                                                        minutes per day. </p>#}
{#                                                </div><!-- .pf-popup-info -->#}
{##}
{#                                            </div><!-- .pf-popup-col2 -->#}
{#                                        </div><!-- .pf-popup -->#}
                                    </div><!-- .pf-grid-item -->
                                    {% endfor %}

                                </div><!-- .pf-grid -->
                            </div><!-- .pf-wrap -->

<!-- END: PAGE CONTENT -->

                </div><!-- .ace-paper-cont -->
            </main><!-- .ace-paper -->
        </div><!-- .ace-paper-stock -->

        </div><!-- .ace-container -->
    </div><!-- #ace-content -->

        <div id="ace-sidebar">
        <button id="ace-sidebar-close" class="btn btn-icon btn-light btn-shade">
            <span class="ace-icon ace-icon-close"></span>
        </button>

        <div id="ace-sidebar-inner">

            <aside class="widget-area">
                <section class="widget widget_search">
                    <form role="search" method="post" class="search-form" id="easySearch" onSubmit=clickSearchButton(this.id)>
                        <label>
                            <span class="screen-reader-text">Search for:</span>
                            <input type="search" class="search-field" placeholder="Search" value="" name="s">
                        </label>
                        <button type="submit" class="search-submit">
                            <span class="screen-reader-text">Search</span>
                            <span class="ace-icon ace-icon-search"></span>
                        </button>
                    </form>
                </section>

                <section class="widget widget_posts_entries">
                    <h2 class="widget-title">recommendation</h2>
                    <ul>
{#                        {% set st = 0%}#}
{#                        {% set ed = 2 %}#}
                        {% for item in recomm_list %}
                            {% set recomm_url = "professor/" + item[0] | replace (" ", "%20")  %}
                        <li>
                            <a class="post-image" href={{ recomm_url }}>
                                <img src={{ item[1] }} alt="">
                            </a>
                            <div class="post-content">
                                <h3>
                                    <a href={{ recomm_url }}>{{ item[0] }}</a>
                                </h3>
                            </div>
                            <div class="post-category-comment">
                                <a href="#" class="post-category">{{ item[2] }}</a>
                                <a href="#" class="post-comments">{{ item[3] }}</a>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </section>

                <div class="tagcloud" style="text-align: center">
                    <button style="font-size: 1em; width: 70px; height: 40px; border: none; border-radius: 5%" onclick=changeRecomm()>Next</button>
                </div>

                <br>
                <br>

            </aside>

        </div><!-- #ace-sidebar-inner -->
        </div><!-- #ace-sidebar -->

        <footer id="ace-footer" class="ace-container-shift">
        <div class="ace-container">
            <div class="ace-footer-cont clear-mrg">
                <p class="text-center">@ EE447 Mobile Network Final Project @</p>
            </div>
        </div><!-- .ace-container -->
        </footer><!-- #ace-footer -->

        <!-- Triangle Shapes -->
        <svg id="ace-bg-shape-1" class="hidden-sm hidden-xs" height="519" width="758">
        <polygon points="0,455,693,352,173,0,92,0,0,71" style="fill:#d2d2d2;stroke:purple;stroke-width:0; opacity: 0.5"></polygon>
        </svg>

        <svg id="ace-bg-shape-2" class="hidden-sm hidden-xs" height="536" width="633">
        <polygon points="0,0,633,0,633,536" style="fill:#c0e3e7;stroke:purple;stroke-width:0"></polygon>
        </svg>

</div><!-- .ace-wrapper -->

<!-- Scripts -->
<script type="text/javascript" src="../../static/main_style/js/vendor/jquery-1.12.4.min.js"></script>


<!---<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyDiwY_5J2Bkv2UgSeJa4NOKl6WUezSS9XA"></script>--->
<script type="text/javascript" src="../../static/main_style/js/plugins/highlight/highlight.pack.js"></script>
<script type="text/javascript" src="../../static/main_style/js/plugins/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="../../static/main_style/js/plugins/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="../../static/main_style/js/plugins/progressbar.min.js"></script>
<script type="text/javascript" src="../../static/main_style/js/plugins/slick.min.js"></script>

<script type="text/javascript" src="../../static/main_style/js/options.js"></script>
<script type="text/javascript" src="../../static/main_style/js/main.js"></script>
</body>
</html>
